<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./font/font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="./libs/jquery-1.12.4.min.js"></script>
    <script src="./libs/template-web.js"></script>
    <script src="./js/data.js"></script>
    <script src="./js/index.js"></script>
</head>

<body>
    <!-- 活动广告栏 -->
    <div class="activity_adv pr">
        <div class="container clearfix">
            <ul>
                <!-- logo -->
                <li class="adv_logo">
                    <a href="#" title="logo" id="index_logo"></a>
                </li>
                <li class="adv_img">
                    <img src="./images/top_img/adv2.jpg">
                </li>
                <li class="adv_list">
                    <h3>
                        <i class="icon_1"></i>
                        <a href="#">成长守护</a>
                    </h3>
                    <h3>
                        腾讯游戏排行榜
                        <i class="icon2 fa fa-chevron-down" aria-hidden="true"></i>
                    </h3>
                </li>
            </ul>
        </div>
        <div class="adv_big">
            <a href="#"></a>
        </div>
    </div>

    <!-- 包个背景层 -->
    <div class="wrap">

        <!-- 头部导航栏 -->
        <div class="tab_top"></div>

        <!-- banner -->
        <div class="banner">
            <div class="container pr">
                <a href="#" class="index_href"></a>
                <p class="bar_list">
                    <a href="#">官网首页</a>
                    <i class="icon_3 fa fa-chevron-right" aria-hidden="true"></i>
                    <a href="#">忍者站</a>
                </p>
                <img src="./images/top_img/rz-title.png" class="rz_title">
            </div>
        </div>

        <!-- 四列搜索 -->
        <div class="content-box">
            <div class="container">
                <!-- 搜索导航 -->
                <div class="search_hero">
                    <h3>忍者筛选</h3>
                    <div class="search">
                        <input type="text" placeholder="请输入你想要的忍者名字">
                        <i class="fa fa-search" aria-hidden="true"></i>
                    </div>
                </div>
                <!-- 英雄详细搜索 -->
                <div class="tab_list">
                    <ul>
                        <li>
                            <h3 class="sex">性别</h3>
                            <p class="">
                                <i class="dot"></i>
                                <span tz = '男'>男忍者</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span  tz = '女'>女忍者</span>
                            </p>
                            <a href="javascript:;" class="clear_choose pa">清除筛选</a>
                        </li>
                        <li>
                            <h3 class="level">等级</h3>
                            <p>
                                <i class="dot"></i>
                                <span tz='S'>S</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz='A'>A</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz='B'>B</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz='C'>C</span>
                            </p>
                        </li>
                        <hr style="background-color: #e3e0da; border: 0;height: 1px;">
                        <li>
                            <h3 class="rz_trait">
                                忍者特点
                                <a href="javascript:;">？</a>
                            </h3>
                            <p>
                                <i class="dot"></i>
                                <span tz="高伤害">高伤害</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="高连击">高连击</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="高爆发">高爆发</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="起手强">起手强</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="高灵活">高灵活</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="范围大">范围大</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="异装忍者">异装忍者</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="控制强">控制强</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="难度高">难度高</span>
                            </p>
                        </li>
                        <li>
                            <h3 class="rz_skill">
                                技能特点
                                <a href="javascript:;">？</a>
                            </h3>
                            <p>
                                <i class="dot"></i>
                                <span tz="突进">突进</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="抓取">抓取</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="霸体">霸体</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="多技能形态">多技能形态</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="特殊机制">特殊机制</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="无敌">无敌</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="格挡">格挡</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="扫地">扫地</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="施放快">施放快</span>
                            </p>
                            <p>
                                <i class="dot"></i>
                                <span tz="飞行">飞行</span>
                            </p>
                        </li>
                    </ul>
                </div>
                <!-- 英雄展示栏 -->
                <div class="hero_list">
                    <ul>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                        <li class="rz_item">
                            <a href="javascript:;" class="re_link">
                                <div class="img_border">
                                    <img src="./images/例图.png">
                                </div>
                                <p class="rz_name">结乃岩部「博人传」</p>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 换页按钮 -->
                <div class="paging_box">
                    <div class="prev_page">
                        <a href="javascript:;"></a>
                    </div>
                    <span>1 / 8</span>
                    <div class="next_page">
                        <a href="javascript:;"></a>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!-- 底部导航栏 -->
    <div class="foot_bar">
        <div class="container">
            <img src="./images/foot_img.png" alt="懒得写了,反正没啥功能，就是样式">
        </div>
    </div>

    <!-- 右侧固定导航栏 -->
    <div class="right_fixed ">
        <img src="./images/fiex_img/menu-side-code.png" class="slide_code">
        <p class="code_exp"></p>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>

    <script id="rz_list" type="text/html">
        <ul>
            {{each data}}
            <li class="rz_item">
                <a href="javascript:;" class="re_link">
                    <div class="img_border">
                        <img src="{{$value.rztx_fa}}">
                    </div>
                    <p class="rz_name">{{$value.rzmc_39}}</p>
                </a>
            </li>
            {{/each}}
        </ul>
    </script>
</body>

</html>